// 动态表单使用示例
// 这个文件展示了如何使用DynamicForm组件

// 1. 基础表单配置示例
export const basicFormSchema = [
  {
    type: 'input',
    field: 'name',
    label: '姓名',
    placeholder: '请输入姓名',
    required: true,
    rules: [
      { required: true, message: '请输入姓名' },
      { min: 2, max: 20, message: '姓名长度在2-20个字符' }
    ]
  },
  {
    type: 'select',
    field: 'gender',
    label: '性别',
    placeholder: '请选择性别',
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' }
    ]
  },
  {
    type: 'date',
    field: 'birthday',
    label: '生日',
    placeholder: '请选择生日'
  },
  {
    type: 'textarea',
    field: 'description',
    label: '描述',
    placeholder: '请输入描述信息',
    props: {
      rows: 4,
      maxlength: 200,
      showCount: true
    }
  }
]

// 2. 复杂表单配置示例（包含联动）
export const complexFormSchema = [
  {
    type: 'select',
    field: 'country',
    label: '国家',
    placeholder: '请选择国家',
    options: [
      { label: '中国', value: 'china' },
      { label: '美国', value: 'usa' },
      { label: '日本', value: 'japan' }
    ]
  },
  {
    type: 'select',
    field: 'province',
    label: '省份',
    placeholder: '请选择省份',
    dependencies: ['country'],
    visible: (model) => model.country === 'china',
    options: [
      { label: '北京', value: 'beijing' },
      { label: '上海', value: 'shanghai' },
      { label: '广东', value: 'guangdong' }
    ]
  },
  {
    type: 'input',
    field: 'city',
    label: '城市',
    placeholder: '请输入城市',
    dependencies: ['province'],
    visible: (model) => model.province,
    rules: [
      { required: true, message: '请输入城市' }
    ]
  },
  {
    type: 'checkbox',
    field: 'interests',
    label: '兴趣爱好',
    options: [
      { label: '阅读', value: 'reading' },
      { label: '音乐', value: 'music' },
      { label: '运动', value: 'sports' },
      { label: '旅行', value: 'travel' }
    ]
  }
]

// 3. 用户信息表单配置示例
export const userInfoSchema = [
  {
    type: 'select',
    field: 'userType',
    label: '用户类型',
    placeholder: '请选择用户类型',
    required: true,
    options: [
      { label: '个人用户', value: 'personal' },
      { label: '企业用户', value: 'enterprise' },
      { label: 'VIP用户', value: 'vip' }
    ]
  },
  {
    type: 'input',
    field: 'username',
    label: '用户名',
    placeholder: '请输入用户名',
    required: true,
    rules: [
      { required: true, message: '请输入用户名' }
    ]
  },
  {
    type: 'autoComplete',
    field: 'city',
    label: '城市',
    placeholder: '请输入城市',
    required: true,
    props: {
      showSearch: true,
      filterOption: (input, option) => 
        option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    options: [
      { label: '北京', value: 'beijing' },
      { label: '上海', value: 'shanghai' },
      { label: '广州', value: 'guangzhou' }
    ]
  },
  {
    type: 'number',
    field: 'age',
    label: '年龄',
    placeholder: '请输入年龄',
    required: true,
    props: {
      min: 0,
      max: 150,
      precision: 0
    },
    rules: [
      { required: true, message: '请输入年龄' },
      { type: 'number', min: 0, max: 150, message: '年龄必须在0-150之间' }
    ]
  },
  {
    type: 'date',
    field: 'birthday',
    label: '生日',
    placeholder: '请选择生日',
    props: {
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD'
    }
  },
  {
    type: 'textarea',
    field: 'description',
    label: '个人描述',
    placeholder: '请输入个人描述',
    props: {
      rows: 3,
      maxlength: 200,
      showCount: true
    }
  }
]

// 4. 表单配置
export const formConfig = {
  layout: 'horizontal',
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
  size: 'middle',
  colon: true,
  labelAlign: 'right'
}

// 5. 使用示例
/*
<template>
  <div>
    <DynamicForm
      :schema="logisticsOrderSchema"
      :model="formData"
      :config="formConfig"
      @submit="handleSubmit"
      @change="handleChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import DynamicForm from '@/components/dynamic-form/DynamicForm.vue'
import { userInfoSchema, formConfig } from '@/components/dynamic-form/example.js'

const formData = ref({})

const handleSubmit = (values) => {
  console.log('表单提交:', values)
  // 处理表单提交逻辑
}

const handleChange = (model) => {
  console.log('表单数据变化:', model)
  // 处理表单数据变化
}
</script>
*/ 